<template>
   <div class="header">
       <div class="header-left">
           <div class="iconfont back-icon">&#xe625;</div>
       </div>
       <div class="header-input">
            <span class="iconfont">&#xe639;</span>
            输入城市/景点/游玩主题
        </div>
        <router-link to="/city">
            <div class="header-right">
                    {{this.city}}
                    <span class="iconfont arrow-icon">&#xe64a;</span>
            </div>
       </router-link>
   </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "HomeHeader",
  computed:{
    ...mapState(['city'])
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/public.styl';

.header {
    display: flex;
    color: #fff;
    line-height: 0.86rem;
    background: $bgColor;
}

.header-left {
    height: 0.64rem;
    float: left;
}

.back-icon {
    text-align: center;
    font-size: 0.4rem;
    padding-left: 0.2rem;
}

.header-input {
    flex: 1;
    height: 0.64rem;
    line-height: 0.64rem;
    margin-top: 0.12rem;
    margin-left: 0.2rem;
    padding-left: 0.2rem;
    background: #fff;
    color: #ccc;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0.1rem;
}

.header-right {
    min-width: 1.04rem;
    padding-left:0.1rem;
    padding-right:0.1rem;
    float: right;
    color: #fff;
    text-align: center;
}

.arrow-icon {
    font-size: 0.24rem;
    margin-left: -0.04rem;
}
</style>
